<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElDatePicker } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oDatepickerSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  //   type: {
  //     type: String,
  //     default: 'daterange'
  //   },
  //   defaultValue: {
  //     type: Array,
  //     default: Object as () => [Date]
  //   },
  ...IgnoreProps
}
export const oDatepickerProps = {
  ...ElDatePicker.props,
  ...oDatepickerSelfProps
}
export type oDatepickerPropsType = ExtractPropTypes<typeof oDatepickerProps>
const oDatepicker = defineComponent({
  name: 'one-datepicker',
  props: oDatepickerProps,
  components: { oDatepickerProps },
  setup(props: oDatepickerPropsType, context) {
    const inProps = omitSelfProps<
      oDatepickerPropsType,
      typeof oDatepickerSelfProps
    >(props, oDatepickerSelfProps)

    return () => (
      <ElDatePicker
        {...inProps}
        clearable={props.clearable}
        class={{
          [oDatepicker.name]: true,
          ['one-datepicker-' + inProps.type]: true
        }}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      ></ElDatePicker>
    )
  }
})
export default oDatepicker
</script>
<style lang="scss">
div.one-datepicker.one-datepicker-date {
  width: var(--one-form-item);
}
div.one-datepicker.one-datepicker-daterange {
  width: var(--two-form-item);
}
</style>
